<template>
  <div class="content">
    <div class="msglist">
      <search />
      <chatlist :watch="watch" @AskgetList="AskgetList3" />
    </div>
    <div class="chatbox">
      <message v-if="flag" ref="child1Container" :watch="watch" @AskgetList="AskgetList2" />
      <v-text @save="save" />
    </div>
  </div>
</template>

<script>
import search from './components/search/search'
import chatlist from './components/chatlist/chatlist'
import message from './components/message/message'
import vText from './components/text/text'
import { sysNews } from '@/api/interrogation'
import { mapActions, mapState } from 'vuex'

export default {
  components: {
    search,
    chatlist,
    message,
    vText
  },
  data() {
    return {
      list: [],
      page: 0,
      pagesize: 10,
      count: 0,
      id: '',
      flag: false
    }
  },
  // 监听属性 类似于data概念
  computed: {
    ...mapState(['watch'])
  },
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.id = this.$route.query.id
    const id = this.$route.query.id
    const orderid = this.$route.query.orderid
    const status = this.$route.query.status
    this.AskgetList(id, orderid, status)
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    ...mapActions(['selectSession', 'get_watch']),
    AskgetList(id, orderid, status) { // 进入ask页面请求list
      console.log('AskgetList')
      // this.page++
      this.flag = true
      var bizcontent = {
        doctor_auth_token: this.$store.getters.token,
        page: this.page,
        pagesize: this.pagesize,
        id: id,
        orderid: orderid,
        v_status: status
      }
      sysNews(bizcontent)
        .then(res => {
          if (res) {
            this.list = this.list.concat(res.data.list)
            this.count = res.data.total_count
            localStorage.setItem('vue-chat', JSON.stringify(this.list))
            this.$store.dispatch('initData')
            this.selectSession(this.list[0].orderid) // 默认最新消息列表
            this.get_watch(true) // 打开监听
          }
        })
        .catch(res => {
          console.log('回调' + JSON.stringify(res))
        })
    },
    save(params) {
      this.$refs.child1Container.sendText(params)
    },
    AskgetList2(id, orderid, status) { // message引用
      console.log('AskgetList-2')

      // this.page++
      this.flag = true
      var bizcontent = {
        doctor_auth_token: this.$store.getters.token,
        page: this.page,
        pagesize: this.pagesize,
        id: id,
        orderid: orderid,
        v_status: status
      }
      sysNews(bizcontent)
        .then(res => {
          if (res) {
            // this.list = this.list.concat(res.data.list)
            // localStorage.setItem('vue-chat', JSON.stringify(this.list))
            // this.$store.dispatch('initData')
            this.get_watch(false)
            this.selectSession(orderid) // 默认当前消息列表
          }
        })
        .catch(res => {
          console.log('回调' + JSON.stringify(res))
        })
    },
    AskgetList3(id, orderid, status) { // chatlist引用侧边栏切换调用-实时消除红点
      console.log('AskgetList-3')
      this.flag = true // 在动态改变了watch的时候flag设置为true
      var bizcontent = {
        doctor_auth_token: this.$store.getters.token,
        page: this.page,
        pagesize: this.pagesize,
        id: id,
        orderid: orderid,
        v_status: status
      }
      sysNews(bizcontent)
        .then(res => {
          if (res) {
            this.list = res.data.list
            this.count = res.data.total_count
            localStorage.setItem('vue-chat', JSON.stringify(this.list))
            this.$store.dispatch('initData')
            this.get_watch(false)
            // this.selectSession(orderid) // 默认当前消息列表
          }
        })
        .catch(res => {
          console.log('回调' + JSON.stringify(res))
        })
    }
  }
}
</script>

<style lang="stylus" scoped>
.content {
  display: flex;
  // width: 800px;
  height: 95vh;

  /deep/input, /deep/ul, /deep/li, /deep/p {
    margin: 0;
    // padding: 0;
    border: 0;
    font-size: 100%;
    font-weight: normal;
    vertical-align: baseline;
    line-height: 1;
  }

  /deep/li {
    list-style: none;
  }

  .message {
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background-image: url('../../../assets/static/images/bg.png');
    background-size: cover;
  }

  /* 设置滚动条的样式 */
  ::-webkit-scrollbar {
    width: 8px;
  }

  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.1);
  }

  .msglist {
    width: 250px;
    background: rgb(230, 230, 230);
  }

  .chatbox {
    flex: 1;
  }
}
</style>
